// 这里写页面的主题结构
import React, { Component } from 'react';
// 这里是引入Ant Design
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd'
import store from './store'
const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
]

class TodoList extends Component {
    constructor(props) {
        super(props)

        this.changeInputValue = this.changeInputValue.bind(this)//bind()为了改变this的指向
        // react全局说数据商店里面办包含有一个方法 叫做getState可以得到里面的全部数据
        console.log(store.getState()); 
        this.setState={}

        // 这是改变后的处理函数
        this.storeChange= this.storeChange.bind(this)//bind()为了改变this的指向
        store.subscribe(this.storeChange)//订阅Redux的状态
        this.clickBtn=this.clickBtn.bind(this)
    }

    deleteitem(index){
        const action = {
            type: 'deleteitem',
            index:index
        }
    }

    clickBtn=()=>{
        const action={type:'additem'}
        store.dispatch(action);
    }

    // 通知数据改变后的处理函数
    storeChange(){
        //  这里是获取的新的store,
        this.setState(store.getState())
    }
    
    // 这里是进行 数据的改变提交  然后派发器派发给对应的组件
    changeInputValue(e) {
        console.log('input',e);
        const action = {type:'changeinput',value:e.target.value}
        // react的派发器向全局数据中心派发改变后的数据
        store.dispatch(action)
        console.log('看全局数据变没变',store.getState());
    }

    componentDidMount(){
        //（初始的时候）第一遍组件渲染的时候  赋值全局数据   之后就没有了
        this.setState(store.getState())
    }

    render() {
        return (
            <div style={{ margin: '10px' }}>
                <div>
                    <Input
                        value={this.state.inputValue}
                        onChange={this.changeInputValue}
                        placeholder='write someting'
                        style={{ width: '250px', marginRight: '10px' }}
                    ></Input>
                    <Button onClick={this.clickbtn} type='primary'>点击增加</Button>
                </div>

                <div style={{ width: '350px', marginRight: '10px' }}>
                    <List
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item,index) => (<List.Item onClick={this.deleteitem.bind(this,index)}>{item}</List.Item>)}
                    >

                    </List>
                </div>
            </div>
        );
    }
}

// 暴露出TodoList,让index用来接收
export default TodoList;
